<template>
    <div class="detail">
        <detail-banner
            :bannerImg='bannerImg'
            :sightName="sightName"
            :gallaryImgs="gallaryImgs"
        ></detail-banner>
        <detail-header></detail-header>
        <detail-base-info></detail-base-info>
        <div class="contain">
            <detail-ticket></detail-ticket>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailTicket from './components/Ticket'
import DetailBaseInfo from './components/BaseInfo'
export default {
    name: 'Detail',
    components: { DetailBanner, DetailHeader, DetailTicket, DetailBaseInfo },
    data() {
        return {
            bannerImg: '',
            sightName: '',
            categoryList: [],
            gallaryImgs: []
        }
    },
    methods: {
        getDetailInfo() {
            axios.get('/api/detail.json', {
                params: {
                    id: this.$route.params.id
                }
            }).then((res) => {
                res = res.data
                if (res.ret && res.data) {
                    const data = res.data
                    this.bannerImg = data.bannerImg
                    this.sightName = data.sightName
                    this.categoryList = data.categoryList
                    this.gallaryImgs = data.gallaryImgs
                }
            })
        }
    },
    mounted() {
        this.getDetailInfo()
    }
}
</script>

<style lang="scss" scoped>
.detail{
    background: #f5f5f5;
    .contain{
        height: 50rem;
    }
}
</style>
